<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>搜索详情</title>
</head>
<script>
    window.onload = function() {
        document.getElementById('searchForm').addEventListener('submit', function (event) {
            let searchInput = document.getElementById('searchInput').value.trim();
            if (searchInput === '') {
                event.preventDefault(); // 阻止表单的默认提交行为
                alert('请输入搜索内容！');
            }
        });
    }
    function back() {
        window.history.go(-1);
    }
</script>
<body>
<div class="top">
    <div onclick="back()"><</div>
    <div>搜索页面</div>
    <div class="search">
        <form action="search" method="post" id="searchForm">
            <label>
                <input type="text" name="search" value="${param.search}" id="searchInput"/>
            </label>
            <button type="submit">搜索</button>
        </form>
    </div>
</div>
<%
    request.setCharacterEncoding("UTF-8");
    String searchValue = request.getParameter("search");
%>
<!-- 显示搜索结果 -->
<c:if test="${not empty products}">
    <div class="body">
        <c:forEach var="product" items="${products}">
            <div class="product">
                <a href="${pageContext.request.contextPath}/productDetail?pid=${product.pid}">
                    <h4>${product.name}</h4>
                    <img class="img" src="${product.image}" />
                    <div class="price">价格：${product.price}</div>
                    <p>${product.description}</p>
                </a>
            </div>
        </c:forEach>
    </div>
</c:if>
</body>
</html>
<style>
    .search button{
        background-color: orange;
        height: 23px;
        width: 60px;
        border: none;
        border-radius: 5px;
    }
    .search input{
        height: 23px;
        width: 200px;
    }
    .search div{
        width: 60px;
    }
    .search{
        padding-right: 20px;
        width: 300px;
        display: flex;
        align-items: center;
    }
    .top {
        display: flex;
        background-color: #e8e8e8;
        font-size: 20px;
    }
    .top div {
        padding: 10px 20px;
        cursor: pointer;
    }
    .body{
        padding: 10px;
        min-width: 600px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        background-color: #f1f1f1;
    }
    .img{
        max-width: 90%;
        max-height: 100px;
    }
    .search button{
        background-color: orange;
        height: 23px;
        width: 60px;
        border: none;
        border-radius: 5px;
    }
    .search input{
        height: 23px;
        width: 200px;
    }
    .search div{
        width: 60px;
    }
    .price{
        color: grey;
        font-size: 12px;
    }
    .product a p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 限制为3行 */
        overflow: hidden;
        text-overflow: ellipsis;
        height: 75px;
    }
    .product a{
        width: 100%;
    }
    .product{
        width: 18%;
        min-width: 200px;
        margin: 5px 4px;
        padding: 10px;
        background-color: white;
        line-height: 25px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    a{
        display: inline-block;
        text-decoration: none;
        color: inherit;
        cursor: default;
        outline: none;
    }
</style>